<!--
 * @Author: 小花
 * @Date: 2022-03-28 18:37:34
 * @LastEditors: 小花
 * @LastEditTime: 2022-04-25 16:05:09
 * @Description: 收费开启
-->
<template>
  <div class='chargeOn_container'>
    <el-divider content-position="left">收费开启</el-divider>
    <el-table :data="tableData" style="width: 100%" @selection-change="val=>multipleSelection=val"
      v-loading="tableDataLoading" element-loading-text="拼命加载中">
      <el-table-column type="expand">
        <template #default="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单单号">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
            <el-form-item label="申报单号">
              <span>{{ props.row.applyId }}</span>
            </el-form-item>
            <el-form-item label="材料编号">
              <span>{{ props.row.materialId }}</span>
            </el-form-item>
            <el-form-item label="材料名称">
              <span>{{ props.row.materialLibraryEntity.materialName }}</span>
            </el-form-item>
            <el-form-item label="材料单价">
              <span class="fa fa-jpy">{{ props.row.materialPrice }}</span>
            </el-form-item>
            <el-form-item label="申报数量">
              <span>{{ props.row.takeAmount }}</span>
            </el-form-item>
            <el-form-item label="申报时间">
              <span class="el-icon-time">{{ props.row.applyTime }}</span>
            </el-form-item>
            <el-form-item label="申报状态">
              <el-tag :type="['danger','success'].at(props.row.applyStatus)" effect="plain">
                {{ [ '未完成', '已完成' ].at(props.row.applyStatus) }}
              </el-tag>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="材料名称" prop="materialLibraryEntity.materialName">
      </el-table-column>
      <el-table-column label="材料单价" prop="materialPrice">
      </el-table-column>
      <el-table-column label="申报数量" prop="takeAmount">
      </el-table-column>
      <el-table-column align="right">
        <template #header #default="scope">
          <div class="flexBox">
            <span class="totalPrice">总计: <i class="fa fa-jpy"></i>{{totalPrice}}</span>
            <el-button type="primary" size="small" :disabled="multipleSelection.length == 0"
              @click="submitChargeItem">提交收费项</el-button>
            <el-button type="info" size="small" plain @click="noChargeItem">无需收费</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { useMainStore } from '@/js/store.js'
import { createOrderDetailsStep } from '@/js/public.js'

export default {
  data () {
    //这里存放数据
    return {
      store: useMainStore(),
      tableData: [],
      multipleSelection: [],
      tableDataLoading: true,
    }
  },
  //监听属性 类似于data概念
  computed: {
    totalPrice () {
      let sum = 0;
      this.multipleSelection.some(val => {
        sum += val.materialPrice * val.takeAmount;
      })
      return sum.toFixed(1);
    }
  },
  //方法集合
  methods: {
    submitChargeItem () {
      if (this.multipleSelection.length == 0) { this.$message.error("提交收费项错误"); return; };
      this.axios.post("/workerHome/submitChargeItem", this.multipleSelection).then(res => {

        if (res.data.code != 43000) {
          this.$message.error(res.data.msg);
          return;
        }
        this.$message.success(res.data.msg);
        this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
      })
    },
    noChargeItem () {
      let orderId = this.store.recordDetails.data.orderId;
      this.axios.get("/workerHome/noChargeItem", { params: { orderId } }).then(res => {
        if (res.data.code != 43000) {
          this.$message.error(res.data.msg);
          return;
        }
        this.$message.success(res.data.msg);
        this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
      })
    },
    getOrderMaterialInfo () {
      if (this.store.recordDetails.step.step.applyMaterial.status == 'success')
        this.axios.post("/workerHome/getOrderMaterialInfo", { orderId: this.store.recordDetails.data.orderId }).then(res => {
          this.tableData = res.data.data;
          this.tableDataLoading = false;
        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getOrderMaterialInfo();
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.chargeOn_container {
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .totalPrice {
    color: #f56c6c;
    font-weight: bold;
    float: left;
    font-size: 1.2rem;
  }
  .flexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>